$wh_100:100%;
$w:1920;
$h:1080;
@mixin wh100{
  width: $wh_100;
  height: $wh_100;
}

//横向转换方法，适用于所有边距、长度方法
@function pxTvw($px){
  @return calc(#{$px}/#{$w}*100vw);
}
//纵向转换方法，适用于所有边距、宽度方法
@function pxTvh($px){
  @return calc(#{$px}/#{$h}*100vh);
}

@mixin imgSize($px){
  width: calc(#{$px}/#{$w}*100vw);
  height: calc(#{$px}/#{$w}*100vw);
}

@mixin textHeight($px) {
  height: calc(#{$px} / #{$h} * 100vh);
  line-height: calc(#{$px} / #{$h} * 100vh);
}

@mixin computed_font($size) {
  font-size: calc(#{$size}/#{$w}*100vw) !important;
}

// 加载背景图
@mixin add_bgImg() {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

// 弹性盒
@mixin elasticFN($justify,$align) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}
// 纵向弹性盒
@mixin portraitFN($justify,$align) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: column;
}
// 边框样式
@mixin border_Color ($one, $two, $three) {
  border: 1px solid $one;
  background: $two;
  color: $three;
}

// 鼠标变小手
@mixin cursorFN() {
  cursor: pointer;
}

// 字体渐变 或者 icon渐变
@mixin IconFont_Color($direction, $one, $two, $three) {
  background-image: -webkit-linear-gradient($direction, $one, $two, $three);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// icon背景渐变
@mixin IconFont_Background($direction, $one, $two, $three) {
  background: linear-gradient($direction, $one, $two, $three);
}

//表格内容超过两行就...展示
@mixin tableTextShow(){
  .omit-box{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}

/** 超过的部分用...展示 **/
@mixin overstepForRow(){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
动画封装
 */
@mixin animation($val,$val2,$val3) {
  animation:$val,$val2,$val3;
}
@mixin keyframes($name,$obj) {
  @keyframes #{$name} {
    @each $i,$val in $obj {
      #{$i} {
        @each $v1,$val2 in $val {
          #{$v1}:$val2;
        }
      }
    }
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(10%);
    -webkit-transform: translateX(10%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(10%);
    -webkit-transform: translateX(10%);
  }
}